<template>
	<view class="page">
		<CustomNav :isBack="false" :topBgColor="topBgColor" title="首页"></CustomNav>
		<image src="@/static/image/bg-img.png" class="bg-img" mode="widthFix"></image>
		<view class="info-block">
			<view class="price-block">
				<view class="price-item">
					<view class="price-title">今日订单</view>
					<view class="price">{{statisticalData.merchantTodayOrders||0}}</view>
					<view class="unit">单</view>
				</view>
				<view class="line"></view>
				<view class="price-item">
					<view class="price-title">今日收入</view>
					<view class="price">￥{{statisticalData.balance||0}}</view>
					<view class="unit">元</view>
				</view>
			</view>
			<view class="menu-block">
				<view class="menu-item">
					<view class="menu-name">{{ statisticalData.merchantTodayOrders||0 }}</view>
					<view class="menu-text">今日订单</view>
				</view>
				<view class="menu-item">
					<view class="menu-name">{{ statisticalData.merchantTotalOrders||0 }}</view>
					<view class="menu-text">累计订单</view>
				</view>
				<view class="menu-item">
					<view class="menu-name">{{evaluate}}</view>
					<view class="menu-text">服务评价</view>
				</view>
				<view class="menu-item">
					<view class="menu-name">{{ statisticalData.merchantTodayRank||0 }}</view>
					<view class="menu-text">排行榜</view>
				</view>
			</view>
			<view class="menu-block block">
				<view class="menu-item" v-for="item in menuList" :key="item.id" @click="navigate(item.url)">
					<image :src="item.icon" class="menu-img"></image>
					<view class="menu-title">{{item.title}}</view>
				</view>
			</view>
			<view class="notices-block">
				<image src="/static/image/menu5.png" class="notices-img"
					@click="navigate('/pages/education/education?type=1')"></image>
				<image src="/static/image/news.png" class="notices-icon"
					@click="navigate('/pages/education/education?type=1')"></image>
				<view class="notice swiper-item">
					<view class="notice-list">
						<view v-for="item in noticesList" :key="item.noticeId" :item-id="item.noticeId"
							@click="navigate('/pages/education/news_detail?id='+item.noticeId)" class="notice-item">
							<view class="news">{{ item.noticeTitle}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="title-block">
				<view class="title-item">
					<view class="line"></view>
					<view class="title">车费记录</view>
				</view>
				<view class="more-item" @click="navigate('/pages/wallet/wallet')">
					<view class="more">查看全部</view>
					<view class="iconfont icon-a-gengduo1"></view>
				</view>
			</view>
			<view class="news-block" v-if="list.length>0">
				<view class="news-item" v-for="item in list" :key="item.id">
					<view class="news-info">
						<view class="news-title">收到车费</view>
						<view class="news-price">+￥{{item.transAmount}}</view>
					</view>
					<view class="time">{{item.createTime}}</view>
				</view>
			</view>
			<view v-else class="empty">暂无数据</view>
			<view v-if="list.length" class="empty">只展示近30条数据</view>
		</view>
		<view @click="handleBroadcast" :class="['broadcast-btn', broadcast.status ? 'active' : 'inactive']">
			<view class="status-dot" :class="{'active': broadcast.status}"></view>
			<text>{{broadcast.text}}</text>
		</view>
	</view>
</template>

<script>
	import {
		getIndexDataApi,
		getTravelRecordApi,
		getNoticesPageApi
	} from '@/api/home.js'
	import {
		isMore
	} from '@/util/util.js'

	export default {
		computed: {
			online() {
				return this.$store.getters['push/online'];
			},
			ready() {
				return this.$store.getters['push/ready'];
			},
			broadcast() {
				let result = {
					text: '正在初始化',
					status: false
				};
				if (this.online) {
					result.status = this.ready;
					result.text = this.ready ? '播报服务已开启' : '播报服务已关闭';
				} else {
					result.status = false;
					result.text = '播报服务已关闭';
				}
				return result;
			}
		},
		data() {
			return {
				topBgColor: 'rgba(0,0,0,0)',
				menuList: [{
						id: 1,
						icon: '/static/image/menu1.png',
						title: '安全教育',
						url: '/pages/education/education?type=2'
					},
					{
						id: 3,
						icon: '/static/image/menu3.png',
						title: '投诉记录',
						url: '/pages/complaint/complaint'
					},
					{
						id: 2,
						icon: '/static/image/menu4.png',
						title: '到站车次',
						// url: '/pages/violation/violation'
						url: '/pages/train/train'
					},
					{
						id: 4,
						icon: '/static/image/menu6.png',
						title: '营收统计',
						// url: '/pages/train/train'
						url: '/pages/wallet/wallet'
					}
				],
				noticesList: [{
					id: 1,
					subject: '关于开展出租车行业专项治理的行动'
				}],
				conf: {
					pageNum: 1,
					pageSize: 30,
				},
				list: [],
				evaluate: 0,
				balance: 0,
				complateOrderNum: 0,
				statisticalData: {},
				currentVersion: 0,
			}
		},
		methods: {
			// 检查后台运行权限
			checkBackgroundPermission() {
				// #ifdef APP-PLUS
				if (uni.getSystemInfoSync().platform === 'android') {
					// 检查是否已经显示过弹窗
					const hasShownDialog = uni.getStorageSync('has_shown_background_permission_dialog');
					if (hasShownDialog) {
						return;
					}

					// 获取手机品牌
					const brand = uni.getSystemInfoSync().brand.toLowerCase();

					uni.showModal({
						title: '提示',
						content: '为了确保语音播报功能正常运行，请允许应用在后台运行',
						confirmText: '去设置',
						success: (res) => {
							if (res.confirm) {
								// 标记已显示过弹窗
								uni.setStorageSync('has_shown_background_permission_dialog', true);

								// 根据不同品牌跳转到相应的设置页面
								const main = plus.android.runtimeMainActivity();
								const Intent = plus.android.importClass('android.content.Intent');
								const Settings = plus.android.importClass('android.provider.Settings');
								const intent = new Intent();

								// 统一使用系统应用详情页跳转
								try {
									intent.setAction(Settings.ACTION_APPLICATION_DETAILS_SETTINGS);
									intent.setData(plus.android.importClass("android.net.Uri").parse(
										"package:" + main.getPackageName()));
									main.startActivity(intent);
								} catch (e) {
									uni.showToast({
										title: '跳转失败，请手动设置',
										icon: 'none'
									});
									console.error('跳转设置页面失败:', e);
								}
							}
						}
					});
				}
				// #endif
			},
			handleBroadcast() {
				uni.showLoading({
					title: '正在连接服务器',
					mask: true
				})

				const targetStatus = this.online ? 2 : 1;
				console.log('切换播报服务状态:', targetStatus);

				this.$store.dispatch('push/handleOnline', targetStatus)
					.then(() => {
						uni.hideLoading();
						uni.showToast({
							title: targetStatus === 1 ? '播报服务已开启' : '播报服务已关闭',
							icon: 'success',
							duration: 2000
						});
					})
					.catch(err => {
						console.error('切换播报服务状态失败:', err);
						uni.hideLoading();
						uni.showToast({
							title: '切换失败，请重试',
							icon: 'none',
							duration: 2000
						});
					});
			},
			getDetail() {
				getIndexDataApi().then((res) => {
					this.evaluate = res.evaluate
					this.statisticalData = res.data
				})
			},
			getList() {
				getTravelRecordApi(this.conf).then(res => {
					this.list = res.list;
				})
			},
			getNoticeList() {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				getNoticesPageApi({
					pageNum: 1,
					pageSize: 4
				}).then(res => {
					this.noticesList = res.list;
				})
			}
		},
		onUnload() {
			uni.$off('onPaymentMessage', () => {
				this.getList();
			})
		},
		onLoad(e) {
			this.getNoticeList()
			uni.$on('onPaymentMessage', () => {
				this.getList();
			})
		},
		onShow() {
			this.getDetail()
			this.getList();
			this.checkBackgroundPermission();
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		overflow: hidden;
		background-color: #F7F6F9;
		position: relative;

		.empty {
			margin-bottom: 100rpx;
		}

		.broadcast-btn {
			width: 400rpx;
			height: 100rpx;
			border-radius: 50rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background: #f5f5f5;
			box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
			color: #666;
			font-size: 32rpx;
			font-weight: 500;
			position: fixed;
			transform: translate(-50%, 0);
			left: 50%;
			z-index: 10;
			bottom: 60rpx;
			transition: all 0.3s ease;
			border: none;

			.status-dot {
				width: 24rpx;
				height: 24rpx;
				border-radius: 50%;
				background: #ff4d4f;
				margin-right: 16rpx;
				transition: all 0.3s ease;
				box-shadow: 0 0 8rpx rgba(255, 77, 79, 0.5);

				&.active {
					background: #67c23a;
					box-shadow: 0 0 8rpx rgba(103, 194, 58, 0.5);
				}
			}

			&.inactive {
				background: #f5f5f5;
				color: #666;
				box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
			}

			&.active {
				background: linear-gradient(135deg, #67c23a, #85ce61);
				color: #fff;
				box-shadow: 0 4rpx 16rpx rgba(103, 194, 58, 0.3);
			}
		}

		.bg-img {
			width: 100%;
			position: absolute;
		}

		.info-block {
			position: relative;
			padding: 30rpx;
			margin-top: 160rpx;

			.block {
				background-color: #fff;
				border-radius: 30rpx;
			}

			.price-block {
				display: flex;
				align-items: center;
				color: #fff;
				margin-bottom: 10rpx;

				.line {
					width: 4rpx;
					height: 30rpx;
					background: linear-gradient(#4582ff, #fff, #4582ff);
				}

				.price-item:first-child {
					width: 41%;
				}

				.price-item:last-child {
					width: 59%;
				}

				.price-item {
					display: flex;
					align-items: center;
					justify-content: center;

					.price-title {
						font-size: 30rpx;
						margin-right: 10rpx;
					}

					.price {
						font-size: 54rpx;
						font-weight: bold;
					}

					.unit {
						font-size: 30rpx;
						margin-left: 10rpx;
					}
				}
			}

			.menu-block {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 20rpx 30rpx;
				margin-bottom: 20rpx;

				.menu-item {
					display: flex;
					flex-direction: column;
					align-items: center;
					margin-top: 16rpx;

					.menu-name {
						margin-bottom: 16rpx;
						font-size: 32rpx;
						color: #fff;
					}

					.menu-text {
						font-size: 30rpx;
						color: #fff;
					}

					.menu-img {
						width: 100rpx;
						height: 100rpx;
						margin-bottom: 16rpx;
					}

					.menu-title {
						font-size: 30rpx;
					}
				}
			}

			.notices-block {
				background-color: #fff;
				display: flex;
				align-items: center;
				margin-bottom: 30rpx;
				border-radius: 20rpx;
				padding: 20rpx 30rpx;
				margin-top: 30rpx;

				.notices-img {
					width: 90rpx;
					height: 100rpx;
					margin-right: 20rpx;
					position: absolute;
					z-index: 99;
				}

				.notices-icon {
					width: 180rpx;
					height: 30rpx;
					margin-right: 10rpx;
					margin-left: 100rpx;
					z-index: 99;
				}

				.notice.swiper-item {
					width: calc(100% - 190rpx);
					height: 60rpx;
					padding-top: 10rpx;
					display: flex;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;

					.notice-list {
						height: 60rpx;
						margin-left: 10rpx;

						.notice-item {
							height: 60rpx;
							display: flex;
							flex-direction: column;
							justify-content: space-between;


							.news {
								width: 100%;
								font-size: 30rpx;
								height: 60rpx;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}
						}
					}
				}
			}

			.title-block {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 30rpx;

				.title-item {
					display: flex;
					align-items: center;

					.line {
						width: 20rpx;
						height: 42rpx;
						background-color: #3175ff;
						border-radius: 60rpx;
						margin-right: 16rpx;
					}

					.title {
						font-weight: bold;
						font-size: 34rpx;
					}
				}

				.more-item {
					display: flex;
					align-items: center;
					color: #767676;

					.more {
						margin-right: 10rpx;
						font-size: 28rpx;
					}

					.iconfont {
						font-size: 26rpx;
					}
				}
			}



			.news-block {
				.news-item {
					padding: 30rpx;
					background-color: #fff;
					margin-bottom: 30rpx;
					border-radius: 30rpx;
				}

				.news-item:nth-child(1) {
					background-color: #3175ff;
					color: #fff;

					.news-info {
						.news-price {
							color: #ea0000;
						}
					}

					.time {
						color: #fff;
					}
				}

				.news-info {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 20rpx;

					.news-title {
						font-weight: bold;
						font-size: 32rpx;
					}

					.news-price {
						color: #24aa25;
						font-size: 34rpx;
						font-weight: bold;
					}
				}

				.time {
					font-size: 26rpx;
					color: #767676;
				}
			}
		}
	}
</style>